@import "../variable.styl";
@import "../base.styl";
@import "../mixin.styl";

// action-sheet
/// picker style
.grimm-picker-fade-enter,
.grimm-picker-fade-leave-active {
  opacity: 0;
}

.grimm-picker-fade-enter-active,
.grimm-picker-fade-leave-active {
  transition: all .3s ease-in-out;
}

.grimm-picker {
  .grimm-popup-content {
    padding: 0 !important;
  }
}

.grimm-picker-panel {
  height: 273px;
  text-align: center;
  font-size: $fontsize-regular;
  background: $color-white;
}

.grimm-picker-move-enter,
.grimm-picker-move-leave-active {
  transform: translate3d(0, 100%, 0);
}

.grimm-picker-move-enter-active,
.grimm-picker-move-leave-active {
  transition: all .3s ease-in-out;
}

.grimm-picker-choose {
  position: relative;
  height: 60px;
}

.grimm-picker-confirm,
.grimm-picker-cancel {
  font-size: $fontsize-regular;
  line-height: 60px;
  padding: 0 $spacing-size-card;
  box-sizing: content-box;
  font-size: $fontsize-regular;
}

.grimm-picker-confirm {
  position: absolute;
  right: 0;
  color: $color-warn-orange;

  &:active {
    color: $color-warn-orange;
  }
}

.grimm-picker-cancel {
  position: absolute;
  left: 0;
  color: $color-medium-grey;
  // &:active {
  //   color: $picker-cancel-btn-active-color;
  // }
}

.grimm-picker-title-group {
  padding: 0 60px;
  display: flex;
  height: 100%;
  flex-flow: column;
  justify-content: center;
  text-align: center;
}

.grimm-picker-title {
  font-size: $fontsize-large;
  line-height: 25px;
  font-weight: normal;
  color: $color-black;
}

.grimm-picker-subtitle {
  margin-top: 2px;
  line-height: 16px;
  font-size: $fontsize-small;
  color: $color-black;
}

.grimm-picker-content {
  position: relative;
  top: 20px;

  >i {
    position: absolute;
    z-index: 10;
    left: 0;
    width: 100%;
    height: 68px;
    pointer-events: none;
    transform: translateZ(0);
  }

  >.border-bottom-1px {
    top: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
  }
  >.border-center-1px{
    top: 68px;
    height: 34px;
    background-image: linear-gradient(180deg,#d0d0d0,#d0d0d0,transparent,transparent),linear-gradient(0deg,#d0d0d0,#d0d0d0,transparent,transparent);
    background-position: top,bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
  }
  >.border-top-1px {
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
  }
}

.grimm-picker-wheel-wrapper {
  display: flex;
  padding: 0 $spacing-size-card;
  >div {
    flex: 1;
    flex-basis: 0.000000001px;
    width: 1%;
    height: 173px;
    overflow: hidden;
    font-size: $fontsize-large;
  }
}

.grimm-picker-wheel-scroll {
  padding: 0;
  margin-top: 68px;
  line-height: 36px;
  list-style: none;
  transition-duration: .3s;
  backface-visibility: hidden
}

.grimm-picker-wheel-item {
  list-style: none;
  height: 36px;
  overflow: hidden;
  white-space: nowrap;
  color: $color-black;
}

.grimm-picker-footer {
  height: 20px;
}

// bubble
// button
/// primary
/// light
/// outline
/// outline-primary
/// disabled
// toolbar
// checkbox
.grimm-checkbox {
  display: inline;
  .checkbox{
    color: $color-check-default;
  }
  .checkbox-active{
    color: $color-active-blue;
  }
}

.grimm-checkbox-block {
  display: flex;
  padding: 10px 0;
  line-height 16px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  .polyfill-mr,.polyfill-ml{
    flex: 1;
  }
  .polyfill-ml{
    text-align: right;
  }
  .checkbox{
    color: $color-check-default;
  }
  .checkbox-active{
    color: $color-active-blue;
  }
}
// checkbox-disabed
.grimm-checkbox-disabed{
  color: #c8c9cc;
  .iconfont{
    background: #ebedf0;
    border-radius: 100%;
  }
  .checkbox-active{
    opacity: .5;
  }
}

/// checked
/// disabled
// checkbox hollow
// checkbox-group
.grimm-checkbox-group {
  .grimm-checkbox {
    margin-right: $spacing-size-card;

    &:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
}

// list
.grimm-item {
  margin-left: $spacing-size-card;
  margin-right: $spacing-size-card;
  padding-top: $spacing-size-card;
  padding-bottom: $spacing-size-card;
  display: flex;

  label {
    min-width: $list-item-label;
    color: $color-dark-grey;
  }

  span {
    flex: 1;
    text-align: right;
  }

  border-bottom: 1px solid $color-divide-grey;
}

.grimm-list {
  .grimm-item {
    &:nth-last-of-type(1) {
      border: none
    }
  }
}

// radio
.grimm-radio {
  display: inline;
  .radio{
    color: $color-check-default;
  }
  .radio-active{
    color: $color-active-blue;
  }
}

.grimm-radio-block {
  display: flex;
  padding: 10px 0;
  line-height 16px;
  border-bottom: 1px solid rgba(0,0,0,.1) 
  .polyfill-mr,.polyfill-ml{
    flex: 1;
  }
  .polyfill-ml{
    text-align: right;
  }
  .radio{
    color: $color-check-default;
  }
  .radio-active{
    color: $color-active-blue;
  }
}
// radio-disabed
.grimm-radio-disabed{
  color: #c8c9cc;
  .iconfont{
    background: #ebedf0;
    border-radius: 100%;
  }
  .radio-active{
    opacity: .5;
  }
}

// radio-group
.grimm-radio-group {
  .grimm-radio {
    margin-right: $spacing-size-card;

    &:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
}

/// selected
/// disabled
// radio hollow
//checker
// dialog
// index-list
// loading
// picker
// popup
//scroll
// slide
// time-picker
// tip
// toast
// upload
// switch
// input
.grimm-input{
  width: 100%;
  height 100%;
  font-size: 14px;
  display: flex
  input{
    flex: 1;
    vertical-align: middle;
    &:focus {
      outline: none;
    }
  }
  .iconfont {
    color: #BBBBBB;
    vertical-align: middle;
    margin-left: 5px;
  }
}

.grimm-textarea{
  font-size: 14px;
  width: 100%;
  textarea{
    width: 100%;
    padding: 12px 8px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
    border-radius:4px; 
    border: 0 solid rgba(0,0,0,0.10);
    box-sizing: border-box;
    resize: none;
    &:focus {
      outline: none;
    }
  }
}
.grimm-searchbar {
  display: flex;
  background-color: $color-medium-white;
  padding: 5px 10px;
  &>.iconfont {
    margin-right: 10px;
    color: $color-medium-grey;
    padding: 8px 0;
  }
  .grimm-searchbar-cancel,.grimm-searchbar-searchBtn{
    font-size: 14px;
    color: $color-medium-grey;
    line-height: 40px;
    margin-left: 10px;
  }
  .grimm-searchbar-content{
    border-radius: 4px;
    background-color: $color-background; // margin: 0 10px;
    flex: 1;
    display: flex;
    padding: 8px 10px;
    .iconfont{
      color:#BBBBBB;
      &.search{
        margin-right: 5px;
      }
    }
    .grimm-input {
      border-radius: 4px;
      flex: 1;
      input{
        background-color: $color-background;
        vertical-align: middle;
        font-size: 12px;
      }
    }
  }
}
.grimm-dialog{
  .grimm-dialog-content{
    background: $color-medium-white;
    border-radius: 8px;
    padding-bottom: 25px;
    padding: 0 16px;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    .grimm-dialog-header{
      text-align: center;
      padding-top: 24px;
      line-height: 16px;
      font-size: 16px;
    }
    .grimm-dialog-main{
      padding-top: 16px
    }
    .grimm-dialog-message{
      font-size: 14px;
      padding-top: 16px;
    }
    .grimm-dialog-footer{
      padding: 16px 0;
      display: flex;        
      .grimm-btn{
        flex: 1;
        &:nth-child(2){
          margin-left: 12px;
        }
      }
    }
  }
}

//textarea
// validator
.grimm-validator-msg-def{
  color: $color-red;
}

// select
.grimm-select {
  position: relative;
  box-sizing: border-box;
  padding: 10px 20px 10px 10px;
  border-radius: 2px;
  font-size: $fontsize-regular;
  line-height: 1.5;
  color: $color-black;
  background-color: $color-white;
  border-1px($color-divide-grey, 2px);

  >span {
    display: inline-block;
  }
}

.grimm-select_active {
  border-1px($color-divide-grey);

  .grimm-select-icon {
    transform: translate(0, -50%) rotate(180deg);
  }
}

.grimm-select_disabled {
  color: $color-divide-grey;
  background-color: $color-divide-grey;
  cursor: not-allowed;
}

.grimm-select-placeholder {
  color: $color-medium-grey;
}

.grimm-select-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  color: $color-dark-grey;
  transform: translate(0, -50%);
  border-style: solid;
  border-color: $color-divide-grey transparent transparent transparent;
  border-width: 4px 4px 0 4px;
  transition: transform .3s ease-in-out;
}

//switch
.grimm-switch{
  .iconfont{
    font-size: 22px;
    vertical-align: middle;
    &.off{
      color: $color-divide-grey;
      transition: .3s ease-in-out;
    }
    &.on{
      color: $color-active-blue;
      transition: .3s ease-in-out;
    }
  }
}

.grimm-switch-block {
  display: flex;
  padding: 10px 0;
  line-height 16px;
  border-bottom: 1px solid rgba(0,0,0,.1) 
  .polyfill-mr,.polyfill-ml{
    flex: 1;
  }
  .polyfill-ml{
    text-align: right;
  }
  .iconfont{
    font-size: 22px;
    vertical-align: middle;
    &.off{
      color: $color-divide-grey;
      transition: .3s ease-in-out;
    }
    &.on{
      color: $color-active-blue;
      transition: .3s ease-in-out;
    }
  }
}

.grimm-switch-disabed{
  color: #c8c9cc;
  .iconfont{
    background: #ebedf0;
    border-radius: 100%;
    &.on{
      opacity: 0.5;
    }
  }
}


// swipe
// form
// drawer
// scroll-nav
// image-preview
// tab-bar & tab-panel
.grimm-tab-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-items: center;
  // height: 44px;
  background: $color-white;
  overflow: auto;

  .grimm-tab {
    height: 100%;
    // line-height: 44px;
    flex: 1;
    text-align: center;
    color: $color-severe-grey;
    font-size: 14px;
    flex-shrink: 0;
    padding: 10px;
  }

  .grimm-tab div {
    font-weight: bold
  }

  .grimm-tab i {
    font-size: 140%
  }
}

.grimm-tab-active {
  color: $color-active-blue !important;
}

.grimm-tab-bar::-webkit-scrollbar {
  display: none
}

.grimm-tab-bar-large-card,
.grimm-tab-bar-small-card {
  border: 1px solid $color-middle-blue;
  border-radius: 5px;

  .grimm-tab {
    border-right: 1px solid $color-middle-blue;
    color: $color-active-blue;
  }

  .grimm-tab:last-child {
    border-right: none;
  }

  .grimm-tab-large-card {
    background: $color-active-blue;
    color: $color-white
  }
}

.grimm-tab-bar-small-card {
  .grimm-tab {
    padding: 3px 10px;
    color: $color-medium-grey;
  }

  .grimm-tab-small-card {
    background: $color-light-blue;
    color: $color-active-blue
  }
}

.grimm-tab-bar-slider {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 20px;
  background-color: $color-active-blue;
  border-radius: 2px;
}

//grimm-image-picker
.grimm-image-picker{
  width 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .grimm-image-picker-item{
    margin: 0 4px 8px;
    border-radius: 4px;
    overflow hidden;
    position relative;
    .grimm-image-picker-item-content{
      padding-bottom: 100%;
      box-sizing: border-box;
      background-size: cover;
    }
    .error-full{
      font-size: 20px;
      position absolute;
      right: 2px;
      top: 0;
      color: rgba(0, 0, 0, .6);
    }
    .grimm-image-picker-item-upload{
      padding-bottom: 100%;
      background: #F4F4F4;
      position relative;
      .iconfont{
        position: absolute;
        font-size: 30px;
        color: #caced3;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    input{
      position: absolute;
      top 0;
      left 0;
      bottom 0;
      right 0;
      width 100%;
      height 100%;
      opacity 0;
    }
  }
}

//imagePreview
.grimm-image-preview{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  z-index: 100;
  .grimm-image-preview-index{
    position absolute;
    top: 20px;
    left: 50%;
    color:#fff;
    transform: translateX(-50%);
  }
  .grimm-image-preview-main{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    &>div{
      height: 100%;
      float left;
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  } 
}

.grimm-table {
  width: 100%;
  table{
    width: 100%;
    background: $color-medium-white;
    font-size: 12px;
    tr{
      box-shadow: 0 0 3px 0 rgba(0,0,0,0.10);
      text-align: left;
      th{
        padding: 10px;
      }
      td{
        .td-content{
          padding: 10px; 
        }
      }
    }
    thead{
      color: $color-medium-grey;
    }
    tbody{
      color: $color-light-grey;
    }
  }
}
.grimm-table-border{
  tr{
    th,td{
      border-right: 1px solid rgba(0,0,0,.12);
      &:nth-last-of-type(1){
        border: none;
      }
    }
  }
}

// @import "../var/color.styl"
// // action-sheet
// $action-sheet-color = $color-grey
// $action-sheet-active-color = $color-warn-orange
// $action-sheet-bgc = $color-white
// $action-sheet-active-bgc = $color-light-grey-opacity
// $action-sheet-title-color = $color-dark-grey
// $action-sheet-space-bgc = $color-mask-bg
// /// picker style
// $action-sheet-picker-cancel-color = $color-light-grey
// $action-sheet-picker-cancel-active-color = $color-light-grey-s
// // bubble
// // button
// $btn-color = $color-white
// $btn-bgc = $color-regular-blue
// $btn-active-bgc = $color-blue
// /// primary
// $btn-primary-color = $color-white
// $btn-primary-bgc = $color-warn-orange
// $btn-primary-active-bgc = $color-dark-orange
// /// light
// $btn-light-color = $color-grey
// $btn-light-bgc = $color-light-grey-sss
// $btn-light-active-bgc = $color-active-grey
// /// outline
// $btn-outline-color = $color-grey
// $btn-outline-bgc = transparent
// $btn-outline-bdc = $color-grey
// $btn-outline-active-bgc = $color-grey-opacity
// $btn-outline-active-bdc = $color-grey
// /// outline-primary
// $btn-outline-primary-color = $color-warn-orange
// $btn-outline-primary-bgc = transparent
// $btn-outline-primary-bdc = $color-warn-orange
// $btn-outline-primary-active-bgc = $color-warn-orange-opacity
// $btn-outline-primary-active-bdc = $color-dark-orange
// /// disabled
// $btn-disabled-color = $color-white
// $btn-disabled-bgc = $color-light-grey-s
// $btn-disabled-bdc = $color-light-grey-s
// // toolbar
// $toolbar-bgc = $color-light-grey-sss
// $toolbar-active-bgc = $color-active-grey
// // checkbox
// $checkbox-color = $color-grey
// $checkbox-icon-color = $color-light-grey-s
// /// checked
// $checkbox-checked-icon-color = $color-warn-orange
// $checkbox-checked-icon-bgc = $color-white
// /// disabled
// $checkbox-disabled-icon-color = $color-light-grey-ss
// $checkbox-disabled-icon-bgc = $color-light-grey-ss
// // checkbox hollow
// $checkbox-hollow-checked-icon-color = $color-warn-orange
// $checkbox-hollow-disabled-icon-color = $color-light-grey-ss
// // checkbox-group
// $checkbox-group-bgc = $color-white
// $checkbox-group-horizontal-bdc = $color-light-grey-s
// // radio
// $radio-group-bgc = $color-white
// $radio-group-horizontal-bdc = $color-light-grey-s
// $radio-color = $color-grey
// $radio-icon-color = $color-light-grey-s
// /// selected
// $radio-selected-icon-color = $color-white
// $radio-selected-icon-bgc = $color-warn-orange
// /// disabled
// $radio-disabled-icon-bgc = $color-light-grey-ss
// // radio hollow
// $radio-hollow-selected-icon-color = $color-warn-orange
// $radio-hollow-disabled-icon-color = $color-light-grey-ss
// //checker
// $checker-item-color = $color-grey
// $checker-item-bdc = $color-light-grey-sss
// $checker-item-bgc = $color-white
// $checker-item-active-color = $color-warn-orange
// $checker-item-active-bdc = $color-warn-orange
// $checker-item-active-bgc = $color-light-orange-opacity
// $checker-item-disabled-color = $color-light-grey-s
// $checker-item-disabled-bdc = $color-light-grey-s
// $checker-item-disabled-bgc = $color-light-grey-ss
// // dialog
// $dialog-color = $color-grey
// $dialog-bgc = $color-white
// $dialog-icon-color = $color-regular-blue
// $dialog-icon-bgc = $color-background
// $dialog-title-color = $color-dark-grey
// $dialog-close-color = $color-light-grey
// $dialog-btn-color = $color-light-grey
// $dialog-btn-bgc = $color-white
// $dialog-btn-active-bgc = $color-light-grey-opacity
// $dialog-btn-highlight-color = $color-warn-orange
// $dialog-btn-highlight-active-bgc = $color-light-orange-opacity
// $dialog-btn-disabled-color = $color-light-grey
// $dialog-btn-disabled-active-bgc = transparent
// $dialog-btns-split-color = $color-row-line
// // index-list
// $index-list-bgc = $color-white
// $index-list-title-color = $color-dark-grey
// $index-list-anchor-color = $color-light-grey
// $index-list-anchor-bgc = #f7f7f7
// $index-list-item-color = $color-dark-grey
// $index-list-item-active-bgc = $color-light-grey-opacity
// $index-list-nav-color = $color-grey
// $index-list-nav-active-color = $color-warn-orange
// // loading
// // picker
// $picker-bgc = $color-white
// $picker-title-color = $color-dark-grey
// $picker-subtitle-color = $color-light-grey
// $picker-confirm-btn-color = $color-warn-orange
// $picker-confirm-btn-active-color = $color-light-orange
// $picker-cancel-btn-color = $color-light-grey
// $picker-cancel-btn-active-color = $color-light-grey-s
// $picker-item-color = $color-dark-grey
// // popup
// $popup-mask-bgc = rgb(37, 38, 45)
// $popup-mask-opacity = .4
// //scroll
// // slide
// $slide-dot-bgc = $color-light-grey-s
// $slide-dot-active-bgc = $color-warn-orange
// // time-picker
// // tip
// $tip-color = $color-white
// $tip-bgc = $color-dark-grey-opacity
// // toast
// $toast-color = $color-light-grey-s
// $toast-bgc = rgba(37, 38, 45, 0.9)
// // upload
// $upload-btn-color = $color-grey
// $upload-btn-bgc = $color-white
// $upload-btn-active-bgc = $color-light-grey-opacity
// $upload-btn-box-shadow = 0 0 6px 2px $color-grey-opacity
// $upload-btn-border-color = #e5e5e5
// $upload-file-bgc = $color-white
// $upload-file-remove-color = rgba(0, 0, 0, .8)
// $upload-file-remove-bgc = $color-white
// $upload-file-state-bgc = $color-mask-bg
// $upload-file-success-color = $color-warn-orange
// $upload-file-error-color = #f43530
// $upload-file-status-bgc = $color-white
// $upload-file-progress-color = $color-white
// // switch
// $switch-on-bgc = $color-warn-orange
// $switch-off-bgc = $color-white
// $switch-off-border-color = #e4e4e4
// // input
// $input-color = $color-grey
// $input-bgc = $color-white
// $input-border-color = $color-row-line
// $input-focus-border-color = $color-warn-orange
// $input-placeholder-color = $color-light-grey-s
// $input-clear-icon-color = $color-light-grey
// //textarea
// $textarea-color = $color-grey
// $textarea-bgc = $color-white
// $textarea-border-color = $color-row-line
// $textarea-focus-border-color = $color-warn-orange
// $textarea-outline-color = $color-warn-orange
// $textarea-placeholder-color = $color-light-grey-s
// $textarea-indicator-color = $color-light-grey-s
// // validator
$validator-msg-def-color = #e64340
// // select
// $select-color = $color-grey
// $select-bgc = $color-white
// $select-disabled-color = #b8b8b8
// $select-disabled-bgc = $color-light-grey-opacity
// $select-border-color = $color-light-grey-s
// $select-border-active-color = $color-warn-orange
// $select-icon-color = $color-light-grey
// $select-placeholder-color = $color-light-grey-s
// // swipe
// $swipe-btn-color = $color-white
// // form
// $form-color = $color-grey
// $form-bgc = $color-white
// $form-invalid-color = #e64340
// $form-group-legend-color = $color-light-grey
// $form-group-legend-bgc = $color-background
// $form-label-required-color = #e64340
// // drawer
// $drawer-color = $color-dark-grey
// $drawer-title-bdc = $color-light-grey-ss
// $drawer-title-bgc = $color-white
// $drawer-panel-bgc = $color-white
// $drawer-item-active-bgc = $color-light-grey-opacity
// // scroll-nav
// $scroll-nav-bgc = $color-white
// $scroll-nav-color = $color-grey
// $scroll-nav-active-color = $color-warn-orange
// // image-preview
// $image-preview-counter-color = $color-white
// // tab-bar & tab-panel
// $tab-color = $color-grey
// $tab-active-color = $color-dark-orange
// $tab-slider-bgc = $color-dark-orange
